<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>地址选择器</title>
    <link rel="stylesheet" href="__CDN__/assets/css/frontend.min.css" />
    <link rel="stylesheet" href="__CDN__/assets/libs/font-awesome/css/font-awesome.min.css" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        .confirm {
            position: absolute;
            bottom: 30px;
            right: 4%;
            z-index: 99;
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 15px;
            text-align: center;
            background-color: white;
            background: #1ABC9C;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 50%;
        }

        .search {
            position: absolute;
            width: 400px;
            top: 0;
            left: 50%;
            padding: 5px;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="input-group">
            <input type="text" id="place" name="q" class="form-control" placeholder="输入地点" />
            <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-success">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
    </div>
    <div class="confirm">确定</div>
    <div id="container"></div>

    <script charset="utf-8"
        src="//map.qq.com/api/js?v=2.exp&libraries=place&key={$config.tencentkey|default=''}"></script>
    <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var map, marker, geocoder, infoWin, searchService, address = null; city = null;
            var init = function () {
                var center = new qq.maps.LatLng({$lat}, {$lng});
                map = new qq.maps.Map(document.getElementById('container'), {
                    center: center,
                    zoom: parseInt("{$config.zoom}")
                });
                //初始化marker
                initmarker(center);

                //实例化信息窗口
                infoWin = new qq.maps.InfoWindow({
                    map: map
                });
                geocoder = new qq.maps.Geocoder({
                    complete: function (result) {
                        infoWin.open();
                        city = result.detail.addressComponents.district;
                        address = result.detail.addressComponents.province +
                            result.detail.addressComponents.city +
                            result.detail.addressComponents.district;
                        if (result.detail.addressComponents.streetNumber == '') {
                            address += result.detail.addressComponents.street;
                        } else {
                            address += result.detail.addressComponents.streetNumber;
                        }
                        infoWin.setContent(address);
                        infoWin.setPosition(result.detail.location);
                    }
                });
                //显示当前marker的位置信息窗口
                geocoder.getAddress(center);

                var latlngBounds = new qq.maps.LatLngBounds();
                //查询poi类信息
                searchService = new qq.maps.SearchService({
                    complete: function (results) {
                        console.log(results);
                        if (typeof results.detail.pois === 'undefined') {
                            alert("未搜索到相关信息");
                            return;
                        }
                        var pois = results.detail.pois;
                        for (var i = 0, l = pois.length; i < l; i++) {
                            var poi = pois[i];
                            latlngBounds.extend(poi.latLng);
                            initmarker(poi.latLng);
                            //显示当前marker的位置信息窗口
                            geocoder.getAddress(poi.latLng);
                        }
                        map.fitBounds(latlngBounds);
                    }
                });
                //实例化自动完成
                var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
                //添加监听事件
                qq.maps.event.addListener(ap, "confirm", function (res) {
                    searchKeyword.call(this, res.value);
                });
                qq.maps.event.addListener(
                    map,
                    'click',
                    function (event) {
                        try {
                            infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">加载中</div>');
                            var latLng = event.latLng,
                                lat = latLng.getLat().toFixed(5),
                                lng = latLng.getLng().toFixed(5);
                            var location = new qq.maps.LatLng(lat, lng);
                            //调用获取位置方法
                            geocoder.getAddress(location);
                            infoWin.setPosition(location);
                            marker.setPosition(location);
                        } catch (e) {
                            console.log(e);
                        }
                    }
                );
            };

            //实例化marker和监听拖拽结束事件
            var initmarker = function (latLng) {
                marker = new qq.maps.Marker({
                    map: map,
                    position: latLng,
                    draggable: true,
                    title: '拖动图标选择位置'
                });
                //监听拖拽结束
                qq.maps.event.addListener(marker, 'dragend', function (event) {
                    var latLng = event.latLng,
                        lat = latLng.getLat().toFixed(5),
                        lng = latLng.getLng().toFixed(5);
                    var location = new qq.maps.LatLng(lat, lng);
                    //调用获取位置方法
                    geocoder.getAddress(location);
                });
            };

            var close = function (data) {
                var index = parent.Layer.getFrameIndex(window.name);
                var callback = parent.$("#layui-layer" + index).data("callback");
                //再执行关闭
                parent.Layer.close(index);
                //再调用回传函数
                if (typeof callback === 'function') {
                    callback.call(undefined, data);
                }
            };

            //执行搜索方法
            var searchKeyword = function () {
                searchService.clear();//先清除
                marker.setMap(null);
                infoWin.close();
                var keyword = $("#place").val();
                // searchService.setLocation("北京");//设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
                searchService.setPageIndex(0);//设置检索的特定页数。
                searchService.setPageCapacity(1);//设置每页返回的结果数量。
                searchService.search(this.place.address + " " + keyword);//开始查询
            };

            //点击确定后执行回调赋值
            $(document).on('click', '.confirm', function () {
                var as = marker.getPosition();
                var x = as.getLat().toFixed(5);
                var y = as.getLng().toFixed(5);
                var zoom = map.getZoom();
                var data = { lat: x, lng: y, zoom: zoom, address: address, city: city };
                close(data);
            });

            //点击搜索按钮
            $(document).on('click', '#search-btn', function () {
                if ($("#place").val() == '')
                    return;
                searchKeyword();
            });

            init();
        });
    </script>
</body>

</html>